import React, { PureComponent, createContext } from 'react'

const UserContext = createContext({
  name: '张久冬',
  age: 18,
})
export default class Test extends PureComponent {
  render() {
    return (
      <>
        <div>Test</div>
        <hr />
        <UserContext.Provider value={{ name: '倩倩', age: 17 }}>
          <Home></Home>
          <hr />
          <About> </About>
        </UserContext.Provider>
      </>
    )
  }
}

// 1.直接使用context进行参数接收
class Home extends PureComponent {
  render() {
    return (
      <div>
        <div>Home</div>
        <div> 姓名： {this.context.name}</div>
        <div>年龄： {this.context.age}</div>
      </div>
    )
  }
}
Home.contextType = UserContext

function About(props) {
  return (
    <div>
      <div>About</div>
      <UserContext.Consumer>
        {user => {
          return (
            <>
              <div> 姓名： {user.name}</div>
              <div>年龄： {user.age}</div>
            </>
          )
        }}
      </UserContext.Consumer>
    </div>
  )
}
